{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" manifest="{% static 'manifest.appcache' %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">
    <link rel="stylesheet" href={% static "css/base.css" %}>
    <title>CJLR 2nd EOC Off-site Meeting</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        body {
            overflow: hidden;
        }

        a{
            outline: none;
            text-decoration: none;
        }

        .index {
            height: 100%;
            background: url({% static "img/bg.png" %}) no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            -o-background-size: 100% 100%;
            box-sizing: border-box;
        }

        i {
            font-style: normal;
            font-size: 7px;
        }

        .content {
            width: 100%;
            margin-left: 21px;
            margin-bottom: 52px;
        }

        .bigTitle .tit {
            font-size: 21px;
            color: #231916;
            font-weight: bold;
        }

        .bigTitle .smTit {
            font-size: 12px;
            color: #231916;
        }

        .hold {
            height: 35px;
        }

        .topHold {
            height: 100px;
        }

        .logoBox {
            width: 100%;
            height: 53px;
            position: relative;
        }

        .logo {
            width: 150px;
            height: 53px;
            position: absolute;
            right: 33px;
            top: 15px;
        }

        .logo img {
            width: 100%;
            height: 100%;
        }

        .useMod {
            width: 223px;
            height: 53px;
            margin: 0 auto;
        }

        .useMod.zj {
            background: url({% static "img/bg_zj.png" %}) no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            -o-background-size: 100% 100%;
        }

        .useMod.fzj {
            background: url({% static "img/bg_fzj.png" %}) no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            -o-background-size: 100% 100%;
        }

        .useMod.zj2 {
            background: url({% static "img/bg_zj2.png" %}) no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            -o-background-size: 100% 100%;
        }

        .useMod.fzj2 {
            background: url({% static "img/bg_fzj2.png" %}) no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            -o-background-size: 100% 100%;
        }


        @keyframes nToy {
            0%{opacity: 0}
            50%{opacity: 1}
            100%{opacity: 0}
        }
        @keyframes yTon {
            0%{opacity: 1}
            50%{opacity: 0}
            100%{opacity: 1}
        }
        .listBox {
            position: relative;
        }

        .listBox a {
            width: 223px;
            height: 53px;
            display: block;
            margin: 0 auto;
        }

        .listBox .zj {
            position: absolute;
            top: 0;
        }

        .listBox .fzj {
            position: absolute;
            top: 90px;
        }
    </style>
</head>
<body>
<div class="index">
    <div class="topHold"></div>
    <div class="bigTitle">
        <div class="content animated fadeInLeft">
            <div class="tit">2018经管会第二次场外会议</div>
            <div class="tit">2018 2<sup style="font-size: 14px;">nd</sup> EOC OFFSITE METTING</div>
            <div class="hold"></div>
            <div class="smTit">上海 SHANGHAI</div>
            <div class="smTit">7<sup>TH</sup> Jun.2018</div>
        </div>
        <div class="listBox">
            <a style="animation: yTon 1.75s ease infinite;" href="{% url 'index_app:zj' %}">
                <div class="useMod zj animated fadeInUp"></div>
            </a>
            <a style="animation: nToy 1.75s ease infinite;" href="{% url 'index_app:zj' %}">
                <div class="useMod zj zj2 animated fadeInUp"></div>
            </a>
            <a style="animation: yTon 1.75s ease infinite;" href="{% url 'index_app:fzj' %}">
                <div class="useMod fzj animated fadeInUp"></div>
            </a>
            <a style="animation: nToy 1.75s ease infinite;" href="{% url 'index_app:fzj' %}">
                <div class="useMod fzj fzj2 animated fadeInUp"></div>
            </a>
        </div>
    </div>
</div>
</body>
</html>